<template>
    <div class="store-preview">

        <figure><img v-lazy="$getImageUrl(item.img_url)"></figure>
        <CommonProcessIcon :icons="icons" />
    </div>
</template>
<script>
export default {
    name: "DesignPrivew",
    props: {
        item: { type: Object, default: () => { } },
    },
    data () {
        return {
        };
    },
    computed: {
        icons () {
            const result = []
            const product = this.item || {}
            const designs = product.data || [];
            const custom = designs.reduce((pre, cur) => {
                const list = cur.design_info || []
                const count = list.reduce((p, c) => p + (c.custom_count || 0), 0)
                return pre + count
            }, 0);


            custom > 0 && result.push('custom')
            designs.find(temp => (temp.design_info || []).find(i => i.output_img && (i.type == 1 || i.type == 0))) && result.push('dtg')
            designs.find(temp => (temp.design_info || []).find(i => i.output_img && i.type == 2)) && result.push('emb')

            return result
        }

    },

    methods: {


    },
    mounted () {
    }
};
</script>

<style lang="scss" scoped>
.store-preview {
    position: relative;
    width: 100%;

    & > figure {
        position: relative;
        &::before {
            content: '';
            display: block;
            padding-bottom: 100%;
        }
        & > img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    .process-icon {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        font-weight: normal;
        span {
            width: 20px;
            height: 20px;
            padding: 1px;
            background: #ffffff;
            border: 1px solid #ebebeb;
            box-sizing: border-box;
            border-radius: 24px;
            margin-right: 6px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-size: 100% 100%;
            }

            &[name='dtg']::before {
                background-image: url(@/assets/images/designer/designer-dtg.png);
            }
            &[name='emb']::before {
                background-image: url(@/assets/images/designer/designer-emb.png);
            }
            &[name='custom']::before {
                background-image: url(@/assets/images/designer/designer-custom.png);
            }

            em,
            a {
                position: absolute;
                left: 50%;
                top: -36px;
                transform: translateX(-50%);
                line-height: 32px;
                padding: 0 16px;
                background: #212121;
                white-space: nowrap;
                display: none;
                color: #fff;
                border-radius: 6px;
                &::before {
                    content: '';
                    width: 0;
                    height: 0;
                    left: 50%;
                    top: 100%;
                    transform: translateX(-50%);
                    border-top: 3px solid #212121;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    position: absolute;
                }
            }

            a {
                text-decoration: underline;
            }

            &:hover em,
            &:hover a {
                display: block;
            }
        }
    }
}
</style>
